<template>
    <div class="container">
        <el-page-header @back="goBack" content="设备过滤表"></el-page-header>
        <div class="e-m-t-45">
            <div class="flex" style="justify-content: space-between;align-items: center; ">
                <el-button type="primary" @click="add">新建</el-button>
                <el-form :inline="true" class="nav-bar-form">
                    <el-form-item>
                        <el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="e-m-t-25">
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="type" label="类型">
                    </el-table-column>
                    <el-table-column prop="productname" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="productid" label="产品ID" width="180">
                    </el-table-column>
                    <el-table-column prop="vendorid" label="厂商ID" width="180">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                            <!-- <el-button @click="mydelete(scope.row)" type="text" size="small">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="table-pagination">
                <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                    :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="dialogType == 'add' ? '新建' : '编辑'" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="类型" prop="type">
                      <el-select v-model="form.type" placeholder="请选择" filterable clearable>
                        <el-option value="">-请选择-</el-option>
                        <el-option v-for="item in types" :value="item" :key="item"></el-option>
                      </el-select>
                      
                    </el-form-item>
                    <el-form-item label="设备名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="产品ID" prop="productid">
                        <el-input v-model="form.productid"></el-input>
                    </el-form-item>
                    <el-form-item label="厂商ID" prop="vendorid">
                        <el-input v-model="form.vendorid"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="newadd('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

</div>
</template>

<script>





export default {
    layout: 'admin',
    head() {
        return {
            title: '设备过滤表-' + this.websetting.name
        }
    },
    components: {},
    props: {},
    data() {
        return {
            rules: {
                type: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                productid: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                vendorid: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
            },
            dialogType: 'add',
            dialogVisible: false,
            key: '',
            page: 1,
            pageSize: 10,
            total: 0,
            types:[
              "未知",
              "无用",
              "扫码器",
              "读卡器",
              "打印机",
              "磅秤"
            ],
            form: {
                type:"",
                name: "",
                productid: "",
                vendorid: "",
                id: 0
            },
            tableData: []

        };
    },
    watch: {},
    computed: {},
    methods: {
        del(row){
            this.$confirm('此操作将删除此设备，不进行过滤, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$axios.post(`/Admin/AIO/Device/Delete?Id=${row.id}`).then(res=>{
                this.$message.error('删除成功');
                this.getList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

           
        },
        edit(row) {
            this.dialogVisible = true
            this.dialogType = "edit"
            this.form.type = row.type
            this.form.name = row.productname
            this.form.productid = row.productid
            this.form.vendorid = row.vendorid
            this.form.id = row.id

        },
        newadd(formName) {
            let api = ''
            if (this.dialogType == "add") {
                api = "/admin/AIO/device/create"
            } else {
                api = "/admin/AIO/device/edit"
            }
            this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(api, {
                "type": this.form.type,
                "productName": this.form.name,
                "vendorId": this.form.vendorid,
                "productId": this.form.productid,
                "id": this.form.id
            }).then(res => {
                console.log(res)
                this.dialogVisible = false
                this.$message({
                    message: '执行成功',
                    type: 'success'
                });
                this.getList()
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

           
        },
        add() {
            this.dialogVisible = true
            this.dialogType = "add"
            this.form.type = ''
            this.form.name = ''
            this.form.productid = ''
            this.form.vendorid = ''
        },
        getList() {
            this.$axios.post("/admin/AIO/device/list", {
                "pageIndex": this.page,
                "pageSize": this.pageSize,
                "key": this.key,
                "state": 0
            }).then(res => {
                console.log(res)
                this.tableData = res.rows
                this.total = res.total
            })
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        goBack() {
            this.$router.go(-1)
        },
    },
    mounted() {
        this.getList()
    }
};
</script>
<style lang="scss" scoped></style>